<template>
  <div>
    <tr>
      <th width="90" height="40"  valign="middle" bgcolor="#f0f8ff"> 职业</th>
      <td valign="middle" >
        <el-checkbox-button v-model="checkCareerAll" @change="handleCheckboxCarrer1All"  style="float: left; margin-left: 0px">全选</el-checkbox-button>
        <el-checkbox-group v-model="checkCareer" @change="handleCheckCareers" style="float: left; margin-left: 0px">
          <el-checkbox-button v-for="career in careers" :label="career.b" :key="career.b">{{career.a}}</el-checkbox-button>
        </el-checkbox-group>
      </td>
    </tr>
    <tr>
      <th width="90" height="40"  valign="middle" bgcolor="#f0f8ff"> 稀有度</th>
      <td height="50" valign="middle" >
        <el-checkbox-button v-model="checkRareAll" @change="handleCheckboxRare1All"  style="float: left; margin-left: 0px">全选</el-checkbox-button>
        <el-checkbox-group v-model="checkRare" @change="handleCheckRares" style="float: left; margin-left: 0px">
          <el-checkbox-button v-for="rare in rares" :label="rare.b" :key="rare.b">{{rare.a}}</el-checkbox-button>
        </el-checkbox-group>
      </td>
    </tr>
<!--    <tr>
      <th width="90" height="40"  valign="middle" bgcolor="#f0f8ff"> 阵营</th>
      <td valign="middle" >
        <el-checkbox-button v-model="checkGroupAll" @change="handleCheckboxGroupAll"  style="float: left; margin-left: 0px">全选</el-checkbox-button>
        <el-checkbox-group v-model="checkGroup" @change="handleCheckGroups" style="float: left; margin-left: 0px">
          <el-checkbox-button v-for="group in groups" :label="group.b" :key="group.b">{{group.a}}</el-checkbox-button>
        </el-checkbox-group>
      </td>
    </tr>-->
  </div>
</template>

<script>
  const careerOptions = [{a:'防爆',b:1}, {a:'强袭',b:2}, {a:'灵子',b:3},{a:'射手',b:4},{a:'援护',b:5},{a:'特勤',b:6}];
  const rareOptions = [{a:'2星',b:2}, {a:'3星',b:3}, {a:'4星',b:4},{a:'5星',b:5}];
  const groupOptions = [{a:'黑月锁链',b:1}, {a:'伊甸教团',b:2}, {a:'地联宪章',b:3},{a:'北方阵线',b:4},{a:'幸存者盟约',b:5}];

  export default {
    name: 'Screen',
    data () {
      return {
        cid: [],
        rare: [],
        gid: [],
        checkCareer: [],
        checkRare: [],
        checkGroup: [],
        checkCareerAll: true,
        checkRareAll: true,
        checkGroupAll: true,
        careers: careerOptions,
        rares: rareOptions,
        groups: groupOptions,
      };
    },
    mounted() {},
    methods: {
      handleCheckboxCarrer1All (val) {
        const arr1 = val ? [] : []
        this.checkCareer = []
        arr1.map(item => {
          this.checkCareer.push(item.b)
          //console.log(this.checkCareer.sort())
        });
        if (this.checkCareer.length = 1){
          this.checkCareerAll = true
          this.checkCareer = []
        }
        this.cid = []
      },

       handleCheckCareers (value) {

        let arrTime = value
        this.checkCareer = arrTime
        //console.log(this.checkCareer.sort())
        let checkedCount = value.length
        this.checkCareerAll = checkedCount === this.careers.length
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.careers.length
        if (this.checkCareer.length == careerOptions.length){
          console.log(this.checkCareer.length)
          this.checkCareer = []
          this.cid = []
        }else{
          this.cid = this.checkCareer
        }
         if (this.checkCareer.length == 0){
           this.checkCareerAll = true
           this.cid = []
         }
      },

      handleCheckboxRare1All (val) {
        const arr2 = val ? [] : []
        this.checkRare = []
        arr2.map(item => {
          this.checkRare.push(item.b)
          //console.log(this.checkRare.sort())
        });
        if (this.checkRare.length = 1){
          this.checkRareAll = true
          this.checkRare = []
        }
        this.rare = []
      },
      handleCheckRares (value) {
        let arrTime = value
        this.checkRare = arrTime
        //console.log(this.checkRare.sort())
        let checkedCount = value.length
        this.checkRareAll = checkedCount === this.rares.length
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.rares.length
        if (this.checkRare.length == rareOptions.length){
          console.log(this.checkRare.length)
          this.checkRare = []
          this.rare = []
        }else{
          this.rare = this.checkRare
        }
        if (this.checkRare.length == 0){
          this.checkRareAll = true
          this.rare = []
        }
      },




/*      handleCheckboxGroupAll (val) {
        const arr = val ? [] : []
        this.checkGroup = []
        arr.map(item => {
          this.checkGroup.push(item.b)
          //console.log(this.checkGroup.sort())
        });
        if (this.checkGroup.length = 1){
          this.checkGroupAll = true
          this.checkGroup = []
        }
        this.gid = null
      },
      handleCheckGroups (value) {
        let arrTime = value
        this.checkGroup = arrTime
        //console.log(this.checkCareer.sort())
        let checkedCount = value.length
        this.checkGroupAll = checkedCount === this.groups.length
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.groups.length
        if (this.checkGroup.length == groupOptions.length){
/!*          console.log(this.checkGroup.length)*!/
          this.checkGroup = []
          this.gid = null
        }else{
          this.gid = this.checkGroup
        }
        if (this.checkGroup.length == 0){
          this.checkGroupAll = true
          this.gid = null
        }
      },*/
    }
  }
</script>

<style scoped>

</style>
